<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login登录界面</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="CSS/login.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
    <!-- 第一部分 最上面 -->
    <div class="header">
        <div class="container">
            <img src="img/HUAWEI.svg" alt="">
        </div>
    </div>
    <!--第二部分 文字部分 -->
    <div class="header-title">
        <span>
            华为账号登录
        </span>
    </div>
    <!-- 第三部分 -->
    <div class="box">
        <!-- 左侧二维码 -->
        <div class="qrcode">
            <div class="qrcode-img">
                <img src="img/登录扫码.png" alt="">
            </div>
            <div class="qrcode-bottem">
                <span>
                    若您使用华为手机，请前往“设置”>“华为账号”扫码登录。
                </span>
            </div>
        </div>

        <!-- 中间竖线 -->
        <span class="Vertical">
        </span>
        
        <!-- 右侧部分 -->
        <div class="big-box-right">
            <div class="right">
                <div class="info">
                    <form class="form-container" action="#">
                        <div class="text">
                            <input class="form-text" type="text" name="user" placeholder="手机号/邮件地址/账号名">
                        </div>
                        
                        <br>
                        <div class="pwd">
                            <input type="password" name="pwd" id="pwd" placeholder="密码">
                        </div>
                        <div class="login">
                            <button >注册</button>
                        </div>
                    </form>

                    <!-- 验证码 -->
                    <div class="Captcha">
                        <a href="#">
                            <span>
                                短信验证码登录
                            </span>
                        </a>
                    </div>
                    
                </div> 
            </div>

        </div>
            

        <!-- 注册，忘记密码，遇到问题 -->
        <div class="link">
            <a href="#">
                <span>注册</span>
            </a>
            <a href="#">
                <span>忘记密码</span>
            </a>
            <a href="#">
                <span>遇到问题</span>
            </a>
        </div>

        <!-- 下面三个图标 -->
        <div class="box-icon">
            <a href="#">
                <i class="iconfont icon-QQ-circle-fill"></i>
            </a>
            <a href="#">
                <i class="iconfont icon-zhifubaozhifu"></i>
            </a>
            <a href="#">
                <i class="iconfont icon-weixin"></i>
            </a>
        </div>
    </div>

    <!-- 最底部 -->
    <div class="footer">
        <!-- 两行的小盒子 -->
        <div class="small-center">

            <!-- 上面一行 -->
            <div class="container-top">
                <p>
                    <a href="#">
                        华为账号用户协议
                    </a>
                    <em>|</em>
                    <a href="#">
                        关于华为账号与隐私的声明
                    </a>
                    <em>|</em>
                    <a href="#">
                        常见问题
                    </a>
                    <em>|</em>
                    <a href="#">
                        Cookies
                    </a>
                </p>
            </div>

            <!-- 下面一行 -->
            <div class="container-bottom">
                <p>华为账号 版权所有 © 2011-2024</p>
            </div>

        </div>
        
    </div>


</body>
</html>